<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ditu, .gaizi {
				width: 300px;
				height: 300px;
				background-image: url(../img/fangaihezi/musicb.jpg);
				position: absolute;
				border-radius: 50%;
			}
			
			.gaizi {
				background-image: url(../img/fangaihezi/musict.jpg);
				transform-origin: bottom;
			}
			/* hover是如何触发的，从元素之外的区域到元素之内的区域才会触发 */
			.container:hover .gaizi {
				transition: all 1s;
				transform: rotateX(180deg);
			}
			
			/* .ditu {
				z-index: 10;
			} */
		</style>
	</head>
	<body>
		<div class="container">
			<div class="ditu"></div>
			<div class="gaizi"></div>
		</div>
	</body>
</html>
